<template>
  <div class="index">
      <div id="A" @click.stop="go" class="click"></div>
    <div class="click_anime"></div>
  </div>
</template>

<script>
import { driver } from "driver.js";
import "@/styles/guideHelper.css"; /* 引入共享样式 */
import { showGuideEffect  } from "@/utils/guideHelper";
// import "driver.js/dist/driver.css";
export default {
  data() {
    return {
      driverObj: null,
      guideTimeout: null, // 用于存储 setTimeout 的 ID
    };
  },
  created() {
    this.$nextTick(() => {
      this.stopDriver();
      // this.guide();
      this.guideTimeout = setTimeout(() => {
        this.guide(); // 等待一秒后执行 driver.js
      }, 1000);
    });
  },
  // 页面关闭时触发
  beforeDestroy() {
    if (this.guideTimeout) {
      clearTimeout(this.guideTimeout); // 清除定时器
    }
    this.stopDriver();
  },
  methods: {
    // 进入下一个页面
    go() {
      this.$router.push({
        path: "/health/register/wx/index14",
      });
    },
    // 点击的引导
    guide() {
      // 定义基本样式
      this.driverObj = driver({
        allowClose: false,
        showProgress: true,
        steps: [
          {
            element: "#A",
            popover: {
              description: "点击“允许”",
              align: "center",
              side: "right",
            },
          },
        ],
      });
      // 开启引导
      this.driverObj.drive();
      // 2秒后显示遮罩和手指
      showGuideEffect();
    },
    // 停止点击引导
    stopDriver() {
      if (this.driverObj) {
        this.driverObj.destroy();
        this.driverObj = null;
        // 移除所有附加的类
        const paths = document.querySelectorAll("path.show-path");
        const click = document.querySelector(".click_anime.isShow");

        if (paths.length) {
          paths.forEach((path) => {
            path.classList.remove("show-path");
          });
        }

        if (click) {
          click.classList.remove("isShow");
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/health/register/wx/12.jpg) no-repeat center;
  background-size: 100% 100%;
  // max-height: 1334px;
}

@media screen and (min-width: 440px) {

  .click {
    position: absolute;
    top: 465px;
    left: 250px;
    width: 70px;
    height: 35px;
  }
  .click_anime {
    z-index: 1000000;
    display: none;
    position: absolute;
    top: 460px;
    left: 240px;
    width: 75px;
    height: 75px;
    background-image: url("@/assets/click.gif");
    background-size: 100% 100%;
    transform: scale(1.2) rotateY(180deg);
  }
}
@media screen and (max-width: 440px) {

  .click {
    position: absolute;
        top: 63.5%;
        left: 63vw;
        width: 13vw;
        height: 4.5%;
  }
  .click_anime {
    z-index: 1000000;
    display: none;
    position: absolute;
    top: 62%;
    left: 65vw;
    width: 150px;
    height: 150px;
    background-image: url("@/assets/click.gif");
    background-size: 100% 100%;
    transform: scale(1.2);
  }

}


</style>
